<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <title>Flask Skeleton{% block title %}{% endblock %}</title>
    <!-- meta -->
    <meta name="description" content="">
    <meta name="author" content="">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <!-- styles -->
    <link href="//maxcdn.bootstrapcdn.com/bootswatch/3.3.1/yeti/bootstrap.min.css" rel="stylesheet" media="screen">
    <link href="{{url_for('static', filename='main.css')}}" rel="stylesheet" media="screen">
    {% block css %}{% endblock %}
  </head>

  <body>

    {% include 'header.html' %}

    <div class="site-content">
      <div class="container">

        <!-- messages -->
        {% with messages = get_flashed_messages(with_categories=true) %}
        {% if messages %}
        <br>
        <div class="row">
          <div class="col-md-12">
            {% for category, message in messages %}
            <div class="alert alert-{{ category }}">
              <a class="close" title="Close" href="#" data-dismiss="alert">&times;</a>
             {{message}}
            </div>
            {% endfor %}
          </div>
        </div>
        {% endif %}
        {% endwith %}


        <!-- child template -->
        {% block content %}{% endblock %}

        <br>

        <!-- errors -->
        {% if error %}
          <p class="error"><strong>Error:</strong> {{ error }}</p>
        {% endif %}

      </div>
    </div>

    <br><br>

    {% include 'footer.html' %}

    <!-- scripts -->
    <script src="//code.jquery.com/jquery-1.11.2.min.js" type="text/javascript"></script>
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js" type="text/javascript"></script>
    <script src="{{url_for('static', filename='main.js')}}" type="text/javascript"></script>
    {% block js %}{% endblock %}

  </body>
</html>
